<template>
  <div class="container">
    <div class="title">
      <h2>活动管理</h2>
      <h5>用于管理小区里不定期举办的各种活动</h5>
    </div>
    <!-- 标题 -->
    <el-card class="box-card">
      <el-form class="demo-form-inline">
        <el-form-item label="小区名称">
          <el-select v-model="formInline.community_code" placeholder="请输入">
            <el-option
              v-for="item in selectHome"
              :key="item.id"
              :label="item.name"
              :value="item.code"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="活动主题">
          <el-input v-model="formInline.title" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="formInline.status" placeholder="请输入">
            <el-option label="有效" :value="1" />
            <el-option label="无效" :value="0" />
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间">
          <div class="block">
            <el-date-picker
              v-model="formInline.createTime"
              style="width: 220px"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['12:00:00']"
            />
          </div>
        </el-form-item>
        <el-form-item class="btn">
          <el-button type="primary" size="small" @click="serachData">搜索</el-button>
          <el-button style="margin-left: 10px" size="small" @click="resect()">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 表格 -->
    <el-card class="tableCard">
      <el-button
        style="float: right; padding: 10px 20px; margin-right: 80px"
        type="primary"
        size="small"
        @click="drawer=true"
      >新增项目</el-button>
      <el-table :data="tableData">
        <el-table-column prop="id" label="ID" width="40%" />
        <el-table-column prop="community.name" label="小区名称" />
        <el-table-column prop="sponsor_unit" label="活动主题" />
        <el-table-column prop="place" label="活动地点" />
        <!-- 照片 -->
        <el-table-column label="照片">
          <template #default="{row}">
            <el-image
              style="width: 100px; height: 100px"
              :src="row.photo?splitStr(`http://124.223.14.236:8881${row.photo}`)[0]:nullImg"
              :preview-src-list="[row.photo?splitStr(`http://124.223.14.236:8881${row.photo}`)[0]:nullImg]"
            />
            <!-- <img width="100px" :src="splitStr(`http://124.223.14.236:8881${row.photo}`)[0]" alt=""> -->
          </template>
        </el-table-column>
        <!-- 单位 -->
        <el-table-column prop="sponsor_unit" label="举办单位" />
        <!-- 状态 -->
        <el-table-column label="状态">
          <template #default="{row}">
            {{ row.status ? '有效' : '无效' }}
          </template>
        </el-table-column>
        <!-- 开始时间 -->
        <el-table-column label="活动开始时间">
          <template #default="{row}">
            {{ formatTimeThis(row.begin_time) }}
          </template>
        </el-table-column>
        <!-- 结束时间 -->
        <el-table-column label="活动结束时间">
          <template #default="{row}">
            {{ formatTimeThis(row.end_time) }}
          </template>
        </el-table-column>
        <!-- 创建时间 -->
        <el-table-column label="创建时间">
          <template #default="{row}">
            {{ formatTimeThis(row.create_time) }}
          </template>
        </el-table-column>
        <!-- 操作 -->
        <el-table-column fixed="right" label="操作">
          <template #default="{row}">
            <el-button
              type="text"
              size="small"
              @click="editTheData(row.id)"
            >编辑</el-button>
            <el-button type="text" size="small" @click="delTheData(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row type="flex" align="middle" style="float:right;padding: 10px 0 40px 0">
        <el-pagination
          :current-page="formInline.current"
          :page-sizes="[5, 10, 30, 40]"
          :page-size="formInline.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="count"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-row>

    </el-card>
    <AddActive
      ref="addDialog"
      :drawer.sync="drawer"
      :select-home="selectHome"
    />
  </div>
</template>

<script>
import AddActive from './components/add-active.vue'
import { getInitDataApi, delDataApi, getSelectHomeApi } from '@/api/service'
import dayjs from 'dayjs'
export default {
  name: 'ActivePage',
  components: {
    AddActive
  },

  data() {
    return {
      dialogShow: false,
      drawer: false,
      count: 0,
      formInline: {
        current: 1, // 页数
        pageSize: 5, // 每页数量
        community_code: '',
        title: '',
        status: null,
        create_time: []
      },
      tableData: [],
      selectHome: [],
      nullImg: 'https://img1.baidu.com/it/u=3392591833,1640391553&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=714'
    }
  },
  computed: {

  },
  created() {
    this.initData()
    this.getSelectHome()
  },
  methods: {
    // 渲染主页
    async initData() {
      const { data: res } = await getInitDataApi(this.formInline)
      // console.log(res)
      this.count = res.count
      this.tableData = res.rows
    },
    // 分页
    handleSizeChange(val) {
      this.formInline.current = 1
      this.formInline.pageSize = val
      this.initData()
    },
    handleCurrentChange(val) {
      this.formInline.current = val
      this.initData()
    },
    // 图片数据处理
    splitStr(str) {
      return str.split(',')
    },
    // 转换时间
    formatTimeThis(time) {
      return dayjs(time).format('YYYY-MM-DD')
    },
    // 删除
    async delTheData(id) {
      await this.$confirm('此操作将永久删除该文件, 是否继续?')
      await delDataApi(id)
      if (this.formInline.current > 1 && this.tableData.length === 1) {
        this.formInline.current--
      }
      this.initData()
    },
    // 搜索框
    async getSelectHome() {
      const res = await getSelectHomeApi()
      this.selectHome = res.data
    },
    // 修改
    editTheData(id) {
      this.$refs.addDialog.editheDate(id)
      this.drawer = true
    },

    // 搜素
    async serachData() {
      if (this.formInline.createTime) {
        this.formInline.createTime = this.formInline.createTime.map(item => {
          return +new Date(item)
        }).join(',')
      }
      const { data: res } = await getInitDataApi({
        pageSize: 999,
        current: 1,
        create_time: this.formInline.createTime,
        title: this.formInline.title,
        status: this.formInline.status,
        community_code: this.formInline.community_code
      })
      this.tableData = res.rows
      this.count = res.count
      // console.log(this.tableData)
    },

    resect() {
      this.formInline = {}
      this.initData()
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 0 40px;
  .title {
    display: flex;
    align-items: center;
    h2 {
      margin-right: 20px;
    }
    h5 {
      font-weight: 400;
      color: #9c9c9d;
      vertical-align: middle;
    }
  }
  .demo-form-inline {
    display: flex;
  }
  .el-form-item {
    margin-right: 22px;

  ::v-deep .el-input__inner{
     height: 35px;
    line-height: 35px;
    width: 200px;
  }
  }

  .btn {
    padding-top: 40px;
    ::v-deep .el-form-item__content {
      display: flex;
    }
  }
  .box-card {
    margin-bottom: 10px;
  }
  ::v-deep .el-table__row{
    height: 100px;
  }
}
</style>

